<template>
	<view class="pageHome" :style="DynamicHeight">
		<!-- 固定背景层 -->
		<view class="fixedBackground"></view>
		<!-- 顶部安全高度 -->
		<view :style="{ height: `${topHeight}px` }"></view>
		<view class="header">
			<view>
				<view class="h-l">
					<view>
						<image src="/static/logo.png" mode="aspectFit"></image>
					</view>
					<view class="title">绿港云办公</view>
				</view>
			</view>
			<view class="h-r">
				<up-icon color="#fff" name="scan" size="28" @click="handleScancode"></up-icon>
			</view>
		</view>
		<!-- <u-swiper
			:list="swiperList"
			keyName="url"
			:autoplay="true"
			interval="5000"
			previousMargin="12"
			nextMargin="12"
			height="184"
			bgColor="rgba(0,0,0, .0)"
			circular
		></u-swiper> -->

		<!-- 		<up-notice-bar
			:text="notice"
			direction="column"
			style="margin-top: 20rpx;"
			mode="link"
			:duration="2500"
			:fontSize="15"
		>
		</up-notice-bar> -->

		<!-- 菜单 -->
		<view :style="listHeightStyle">
			<home-menu ref="homeMenu"></home-menu>
		</view>
		<!-- 底部导航 -->
		<!-- <tabbar :value="2"></tabbar> -->
	</view>
</template>

<script>
	import {
		initPushAndNotification
	} from '@/utils/webpush.js'
	import base from '@/apis/cloud/base.js'
	import tabbar from '@/components/home-tabbar/index.vue'
	import HomeMenu from "@/components/workHomeMenu/index.vue"
	import {
		useUserStore,
		useSocketStore
	} from "@/pinia-store/user.js"
	import {
		mapStores
	} from 'pinia'
	import {
		handleScanResult
	} from '@/utils/publicmethod'
	export default {
		components: {
			HomeMenu,
			tabbar
		},
		data() {
			return {
				height: 0,
				topHeight: 0,
				notice: [],
				swiperList: [
					'/static/supplyChain/banner1.jpg', '/static/supplyChain/banner2.jpg',
					'/static/supplyChain/banner3.jpg', '/static/supplyChain/banner4.jpg',
					'/static/supplyChain/banner5.jpg', '/static/supplyChain/banner6.jpg',
					'/static/supplyChain/banner7.jpg'
				],

				// 更新参数
				newVision: 0, //版本号
				upLoadUrl: '', //下载地址
				appStoreUrl: '', //下载地址
				log: '', //备注
				show: false, // 展示更新
				listHeightStyle: {}, // 动态计算的样式
				DynamicHeight: {}
			};
		},
		onShow() {
			setTimeout(() => {
				if (this.$refs.homeMenu) {
					this.$refs.homeMenu.startLogTimer()
				}
			}, 100);
			uni.setStorageSync('OAcurrentTab', 0);
			uni.setStorageSync('approval_selectedTime', null);
		},
		created() {
			this.height = (uni.getSystemInfoSync().windowHeight || uni.getSystemInfoSync().screenHeight) || 0
			// #ifdef APP-PLUS
			this.DynamicHeight = {
				height: `${this.height}px`,
				overflow: 'hidden'
			}
			// #endif
			// #ifdef H5
			this.DynamicHeight = {
				height: `${this.height}px`,
				overflow: 'hidden'
			}
			// 异步初始化推送，不阻塞
			this.$nextTick(() => {
				initPushAndNotification(this.userStore.user.chat_account)
					.then(() => {
						console.log('✅ WebPush 推送初始化完成');
					})
					.catch((err) => {
						console.error('❌ WebPush 初始化失败:', err);
					});
			});
			// #endif
			let app = uni.getSystemInfoSync();
			this.topHeight = app.statusBarHeight;
			this.getNotice();
			this.calculateListHeight();
		},
		onHide() {
			this.$refs.homeMenu.clearTimerLog()
		},
		beforeUnmount() {
			this.$refs.homeMenu.clearTimerLog()
		},
		computed: {
			...mapStores(useUserStore, useSocketStore)
		},
		onBackPress() {
			jzH5ScanCode.destroy();
		},
		methods: {
			//扫一扫
			async handleScancode() {
				/*
				uni.navigateTo({
				  url: "/pages/watermarkCamera/index"
				})
				return;*/

				// #ifdef APP-PLUS
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						handleScanResult(res.result)
					},
					fail: (err) => {
						console.error('扫描失败:', err);
					}
				});
				// #endif

				// #ifdef H5
				uni.navigateTo({
					url: "/pages/h5ScanUpload/index"
				})
				// #endif

			},
			calculateListHeight() {
				// #ifdef APP-PLUS
				this.listHeightStyle = {
					height: `${this.height - 70}px`,
					overflowY: 'auto',
				};
				// #endif

				// #ifdef H5
				this.listHeightStyle = {
					height: `${this.height - 45}px`,
					overflowY: 'auto',
				};
				// #endif
			},
			async getNotice() {
				const noticeMsg = await base.gzt_carousel({
					add_phone: this.userStore?.user?.phone
				});
				if (noticeMsg.status == 1) {
					this.notice = noticeMsg.data.map(item => {
						if (item.title.length > 20) {
							return `${item.title.slice(0, 22)}...`
						} else {
							return item.title
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		max-width: 100vw;
	}

	.pageHome {
		position: relative;
	}


	.fixedBackground {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background:
			url('../../../static/work-home/Background.png') no-repeat center top / cover,
			url('../../../static/work-home/Background.png') no-repeat center bottom / cover;
		z-index: -1;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 75%;
			mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 0) 100%);
		}

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 45%;
			mask: linear-gradient(to top, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%);
		}
	}


	.header {
		padding: 10rpx;
		padding-right: 20rpx;
		display: flex;
		justify-content: space-between;

		.h-l {
			display: flex;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			.title {
				margin-left: 8rpx;
				font-size: 38rpx;
				font-weight: 500;
				color: #fff;
			}
		}

	}
</style>